<template>
  <div class="route add page">
      <div class="title">路线管理</div>
      <div class="from">
        <text-input v-model="route.name"  label="路线名" class="plane" color="#009C4E"></text-input>
        <text-input style="margin-top: 20px" v-model="route.remark"  label="备注" class="plane" color="#009C4E"></text-input>
        <select-txt  :options="shopData" :alias="shopAlias"  :items="shopItems"    label="选择药店" class="plane" color="#009C4E" ></select-txt>
        <select-txt   :options="schoolData" :alias="schoolAlias"  :items="schoolItems"    label="选择学校" class="plane" color="#F9A528" ></select-txt>
        <div class="filter">
          <span class="ft" @click="showPrompt">筛选</span>
          <span class="val">{{fv}}</span>
          <span class="reset" @click="reset" v-if="fv">重置</span>
        </div>
      </div>
    <div class="btn" @click="confirm">提交</div>
  </div>
</template>

<script>
import TextInput from '@/components/form/text-input'
import SelectTxt from '@/components/form/select-txt'
// import { listShop } from '@/api/shop'
// import { listSchool } from '@/api/school'
import { addRoute, getRoute, shopList, schoolList } from '@/api/route'
import { showAlert, showPrompt } from '@/dialog'
export default {
  created () {
    shopList().then(res => {
      this.shops = res.data
    })
    schoolList().then(res => {
      this.schools = res.data
    })
    this.id = this.$route.query.id
    if (this.id) {
      getRoute(this.id).then(res => {
        this.route = res.data
        if (res.extra.shop.length > 0) {
          this.shopItems = res.extra.shop.map(shop => {
            return { text: shop.shopName, value: shop.id }
          })
        }
        if (res.extra.school.length > 0) {
          this.schoolItems = res.extra.school.map(school => {
            return { text: school.name, value: school.id }
          })
        }
      })
    }
  },
  computed: {
    shopData () {
      if (!this.shops) return this.shops
      const data = this.shops.filter(item => {
        return item.shopName && item.shopName.indexOf(this.fv) > -1
      })
      console.log(data)
      if (data.length == 0 || !this.fv) {
        return this.shops
      } else {
        return data
      }
    },
    schoolData () {
      if (!this.schools) return this.schools
      const data = this.schools.filter(item => {
        return this.fv && item.name && item.name.indexOf(this.fv) > -1
      })
      if (data.length == 0 || !this.fv) {
        return this.schools
      } else {
        return data
      }
    }
  },
  methods: {
    reset () {
      this.fv = null
    },
    showPrompt () {
      showPrompt('输入关键字').then(res => {
        this.fv = res
      })
    },
    confirm () {
      this.route.shopIds = this.shopItems.map(mp => mp.value)
      this.route.schoolIds = this.schoolItems.map(mp => mp.value)
      addRoute(this.route).then(res => {
        showAlert('操作成功').then(res => {
          this.$router.back()
        })
      })
    }
  },
  data () {
    return {
      fv: null,
      route: {
        id: null,
        name: null,
        remark: null,
        shopIds: [],
        schoolIds: []
      },
      shops: null,
      schools: null,
      shopAlias: {
        value: 'id',
        text: 'shopName'
      },
      schoolAlias: {
        value: 'id',
        text: 'name'
      },
      shopItems: [{}],
      schoolItems: [{}]
    }
  },
  components: {
    TextInput, SelectTxt
  }
}
</script>

<style scoped lang="stylus">
  .route
      .filter
        padding 0px 10px
        margin-top 20px
        color #55545D
        font-size 14px
        display flex
        align-items center
        justify-content space-between
        .ft
          color red
        .reset
          color red
      .title
          margin 15px 0
          dpr-font(18px)
          color #55545D
          display flex
          justify-content center
      .btn
        margin-top 20px
        background-color #009c4e
        border-radius 20px
        height 40px
        font-size 16px
        display flex
        align-items center
        justify-content center
        color white
</style>
